path: root/src/routes/projects/[id]/+page.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import { matchItems } from '$lib/components/fuzzy-search';
	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
	import StatusBadge from '$lib/components/StatusBadge.svelte';
	import {
		formatFrequency,
		parseIntervalToDays,
		type RoutineState,
	} from '$lib/shared/routine-metrics';

	let { data, form } = $props();

	let name = $state('');
	let frequency = $state('');
	let editingId = $state<number | null>(null);
	let editName = $state('');
	let editFrequency = $state('');

	const frequencyDays = $derived(parseIntervalToDays(frequency));
	const editFrequencyDays = $derived(parseIntervalToDays(editFrequency));

	let showArchived = $state(false);
	let archiveFilter = $state('');

	const filteredArchived = $derived(
		archiveFilter.trim() === ''
			? data.archived
			: matchItems(data.archived, archiveFilter).map((m) => m.obj),
	);

	const dateFormatter = new Intl.DateTimeFormat('fr-FR', {
		day: 'numeric',
		month: 'short',
	});

	function sorted(routines: RoutineState[]): RoutineState[] {
		return [...routines].sort(
			(a, b) => b.overdueRatio - a.overdueRatio || a.name.localeCompare(b.name),
		);
	}

	function startEdit(routine: RoutineState) {
		editingId = routine.id;
		editName = routine.name;
		editFrequency = `${routine.frequencyDays}d`;
	}
</script>

<main>
	<header class="page-header">
		<h1>{data.project.name}</h1>
		<ScoreBadge score={data.healthScore} />
	</header>

	<form
		class="add-bar"
		method="POST"
		action="?/addRoutine"
		use:enhance={() => {
			return async ({ update }) => {
				name = '';
				frequency = '';
				await update({ reset: false });
			};
		}}
	>
		<input
			class="form-input"
			type="text"
			name="name"
			bind:value={name}
			placeholder="Nouvelle routine..."
			autocomplete="off"
		/>
		<input
			class="form-input frequency-input"
			class:input-invalid={frequency !== '' && frequencyDays === null}
			type="text"
			name="frequencyDays"
			bind:value={frequency}
			placeholder="2w"
			autocomplete="off"
			aria-label="Intervalle (ex: 1d, 2w, 3m)"
		/>
		<button
			class="btn-accent"
			type="submit"
			disabled={!name.trim() || frequencyDays === null}
			aria-label="Ajouter"
		>
			+
		</button>
	</form>

	{#if frequency !== '' && frequencyDays === null}
		<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
	{/if}

	{#if form?.error}
		<p class="error">{form.error}</p>
	{/if}

	<ul class="item-list">
		{#each sorted(data.routines) as routine (routine.id)}
			<li class="item-row item-row--card routine-row">
				{#if editingId === routine.id}
					<form
						class="edit-form"
						method="POST"
						action="?/editRoutine"
						use:enhance={() => {
							return async ({ result, update }) => {
								if (result.type === 'failure') {
									// Keep the edit form open so the error is visible.
									await update({ reset: false });
									return;
								}
								editingId = null;
								await update({ reset: false });
							};
						}}
					>
						{#if form?.error}
							<p class="error edit-error">{form.error}</p>
						{/if}
						<input type="hidden" name="id" value={routine.id} />
						<input
							class="form-input"
							type="text"
							name="name"
							bind:value={editName}
						/>
						<input
							class="form-input frequency-input"
							class:input-invalid={editFrequency !== '' &&
								editFrequencyDays === null}
							type="text"
							name="frequencyDays"
							bind:value={editFrequency}
							placeholder="2w"
							autocomplete="off"
							aria-label="Intervalle (ex: 1d, 2w, 3m)"
						/>
						<button
							class="btn-primary"
							type="submit"
							disabled={!editName.trim() || editFrequencyDays === null}
						>
							OK
						</button>
						<button
							class="btn-ghost"
							type="button"
							onclick={() => (editingId = null)}>✕</button
						>
					</form>
				{:else}
					<div class="routine-info">
						<a
							class="routine-name"
							href="/projects/{data.project.id}/routine/{routine.id}"
							>{routine.name}</a
						>
						<span class="routine-meta">
							{formatFrequency(routine.frequencyDays)}
							{#if routine.lastDoneAt}
								· fait le {dateFormatter.format(new Date(routine.lastDoneAt))}
							{:else}
								· jamais fait
							{/if}
						</span>
					</div>
					<StatusBadge
						status={routine.status}
						overdueDays={routine.overdueDays}
					/>
					<form method="POST" action="?/complete" use:enhance>
						<input type="hidden" name="id" value={routine.id} />
						<button class="btn-done" type="submit">Fait</button>
					</form>
					<button
						class="btn-ghost"
						type="button"
						aria-label="Modifier"
						onclick={() => startEdit(routine)}>✎</button
					>
					<form method="POST" action="?/archiveRoutine" use:enhance>
						<input type="hidden" name="id" value={routine.id} />
						<button class="btn-ghost" type="submit" aria-label="Archiver">
							&times;
						</button>
					</form>
				{/if}
			</li>
		{/each}
	</ul>

	{#if data.routines.length === 0}
		<p class="empty">Aucune routine</p>
	{/if}

	{#if data.archived.length > 0}
		<section class="archived-section">
			<button
				class="archived-toggle"
				type="button"
				onclick={() => (showArchived = !showArchived)}
				aria-expanded={showArchived}
			>
				<span class="chevron">{showArchived ? '▾' : '▸'}</span>
				Archivées
				<span class="count">{data.archived.length}</span>
			</button>
			{#if showArchived}
				<input
					class="form-input archived-search"
					type="search"
					bind:value={archiveFilter}
					placeholder="Rechercher une routine archivée..."
					autocomplete="off"
					aria-label="Rechercher parmi les routines archivées"
				/>
				<ul class="item-list">
					{#each filteredArchived as routine (routine.id)}
						<li class="item-row item-row--card archived-row">
							<a
								class="routine-name"
								href="/projects/{data.project.id}/routine/{routine.id}"
								>{routine.name}</a
							>
							<span class="archived-date">
								{formatFrequency(routine.frequencyDays)} · archivée le
								{dateFormatter.format(new Date(routine.archivedAt))}
							</span>
						</li>
					{/each}
				</ul>
				{#if filteredArchived.length === 0}
					<p class="empty archived-empty">Aucune correspondance.</p>
				{/if}
			{/if}
		</section>
	{/if}

	<footer class="page-footer">
		<form method="POST" action="?/archiveProject" use:enhance>
			<button class="btn-archive" type="submit">Archiver le projet</button>
		</form>
	</footer>
</main>

<style>
	.routine-row {
		flex-wrap: wrap;
		padding: 0.75rem 1rem;
	}

	.routine-info {
		flex-grow: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.routine-name {
		font-weight: 500;
		color: var(--text);
		text-decoration: none;
	}

	.routine-name:hover {
		color: var(--accent);
	}

	.routine-meta {
		font-size: 0.75rem;
		color: var(--text-secondary);
	}

	.edit-form {
		display: flex;
		flex-grow: 1;
		gap: 0.5rem;
		align-items: center;
		flex-wrap: wrap;
	}

	.edit-error {
		width: 100%;
	}

	.edit-form .form-input {
		flex: 1;
		padding: 0.5rem 0.75rem;
	}

	.frequency-input {
		width: 4.5rem;
		flex-shrink: 0;
	}

	.page-footer {
		margin-top: 2rem;
		display: flex;
		justify-content: center;
	}

	.btn-archive {
		border: none;
		background: transparent;
		color: var(--text-secondary);
		font-size: 0.875rem;
		text-decoration: underline;
		cursor: pointer;
	}

	.btn-archive:hover {
		color: var(--danger);
	}

	.archived-section {
		margin-top: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.archived-toggle {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.375rem 0.75rem;
		border: none;
		border-radius: 0.625rem;
		background: transparent;
		color: var(--text-secondary);
		font-family: inherit;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.archived-toggle:hover {
		background: var(--surface);
		color: var(--text);
	}

	.archived-toggle .chevron {
		font-size: 0.75rem;
	}

	.archived-toggle .count {
		min-width: 1.25rem;
		padding: 0 0.375rem;
		border-radius: 9999px;
		background: var(--surface);
		text-align: center;
		font-size: 0.75rem;
		font-weight: 600;
	}

	.archived-search {
		width: 100%;
	}

	.archived-row .routine-name {
		flex-grow: 1;
		color: var(--text-secondary);
	}

	.archived-row .routine-name:hover {
		color: var(--accent);
	}

	.archived-date {
		flex-shrink: 0;
		font-size: 0.75rem;
		color: var(--text-secondary);
	}

	.archived-empty {
		padding: 1rem 0;
	}
</style>